import React, { useEffect, useRef } from "react";

const ParticleBackground: React.FC = () => {
  const canvasRef = useRef<HTMLCanvasElement | null>(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;

    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    const ctx = canvas.getContext("2d");

    if (!ctx) return;

    const particlesArray: Particle[] = [];
    const count = Math.floor((canvas.height / 100) * (canvas.width / 100));

    class Particle {
      x: number;
      y: number;
      directionX: number;
      directionY: number;

      constructor(x: number, y: number) {
        this.x = x;
        this.y = y;
        this.directionX = 0.5 - Math.random();
        this.directionY = 0.5 - Math.random();
      }

      update() {
        this.y += this.directionY;
        this.x += this.directionX;
      }

      draw() {
        if (ctx) {
          ctx.beginPath();
          ctx.arc(this.x, this.y, 2, 0, Math.PI * 2);
          ctx.fillStyle = "white";
          ctx.fill();
        }
      }
    }

    function createParticle() {
      if (!canvas) return;
      const x = Math.random() * canvas.width;
      const y = Math.random() * canvas.height;
      particlesArray.push(new Particle(x, y));
    }

    function handleParticle() {
      if (!canvas) return;
      const toRemove = [];

      for (let i = 0; i < particlesArray.length; i++) {
        const particle = particlesArray[i];
        particle.update();
        particle.draw();

        if (
          particle.x < 0 ||
          particle.x > canvas.width ||
          particle.y < 0 ||
          particle.y > canvas.height
        ) {
          toRemove.push(i);
        }

        for (let j = i + 1; j < particlesArray.length; j++) {
          const dx = particlesArray[i].x - particlesArray[j].x;
          const dy = particlesArray[i].y - particlesArray[j].y;
          const distance = Math.sqrt(dx * dx + dy * dy);

          if (distance < 100 && ctx) {
            ctx.beginPath();
            ctx.strokeStyle = `rgba(255,255,255,${1 - distance / 200})`;
            ctx.moveTo(particlesArray[i].x, particlesArray[i].y);
            ctx.lineTo(particlesArray[j].x, particlesArray[j].y);
            ctx.lineWidth = 1;
            ctx.stroke();
          }
        }
      }

      // 删除标记的粒子
      for (let i = toRemove.length - 1; i >= 0; i--) {
        particlesArray.splice(toRemove[i], 1);
      }
    }

    function draw() {
      if (!canvas || !ctx) return;
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      if (particlesArray.length < count) {
        createParticle();
      }

      handleParticle();
    }

    const intervalId = setInterval(draw, 16); // 16ms ≈ 60fps

    return () => {
      clearInterval(intervalId);
    };
  }, []);

  return (
    <canvas
      ref={canvasRef}
      style={{
        width: "100%",
        height: "100%",
        position: "fixed",
        left: 0,
        top: 0,
        pointerEvents: "none",
      }}
    />
  );
};

export default ParticleBackground;
